<template>
	<view class="container">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<input class="ser-input" type="text" v-model="val" placeholder="请输入您要搜索的内容" @focus="getFocusSearch" />
			<!-- <view class="mp-search-button">
				<image src="../../static/icon_search.png" style="width: 24px;height: 24px;"></image>
			</view> -->
		</view>
		<!-- #endif -->

		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper class="carousel" circular @change="swiperChange" autoplay="true" interval='5000' duration="500">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
					@click="navToDetailPage(item,0)">
					<image mode="aspectFit" :src="item.FImgUrl" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
		<!-- 分类 -->
		<!-- <view class="cate-section" >
			<view class="cate-item" v-for="(item,index) in classname" :key="item.itemId" @click="navToClass(item.itemId)">
				<image :src="`http://minipos.posyun3721.com/image/shopImg/c${index+1}.png`||item.FImgUrl"></image>
				<text>{{item.FName}}</text>
			</view>
		</view> -->
		<!-- 模块 -->
		<module magicId="0" :magicList="classname" @navToClass="navToClass"></module>

		<view class="ad-1 none" v-if="advertis!=''">
			<image class="ad-swiper" :src="advertis.FImgUrl"></image>
		</view>
		<!-- 滚动公告栏 -->
		<!-- <scroll-notice></scroll-notice> -->

		<!-- 秒杀楼层 -->
		<view class="seckill-section m-t" v-if="seckill!=''">
			<view class="s-header">
				<image class="s-img" src="http://minipos.posyun3721.com/image/shopImg/secskill-img.jpg" mode="widthFix">
				</image>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(item, index) in seckill" :key="index" class="floor-item" @click="miniProgram(item,1)">
						<image :src="item.FGoodImg" mode="aspectFit"></image>
						<text class="title clamp">{{item.Title}}</text>
						<text class="price">￥{{(item.Price).toFixed(2)}}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<navigator class="f-header m-t" url="../Marketing/index/index2">
			<image src="http://minipos.posyun3721.com/image/shopImg/h1.png"></image>
			<view class="tit-box">
				<text class="tit">限时活动</text>
			</view>
			<text class="yticon icon-you"></text>
		</navigator>
		<!-- 团购楼层 -->
		<view class="f-header m-t" v-if="spellGroup!=''">
			<image src="http://minipos.posyun3721.com/image/shopImg/h1.png"></image>
			<view class="tit-box">
				<text class="tit">精品团购</text>
				<text class="tit2">Boutique Group Buying</text>
			</view>
			<text class="yticon icon-you"></text>
		</view>
		<view class="group-section none" v-if="spellGroup!=''">
			<swiper class="g-swiper" :duration="500">
				<swiper-item class="g-swiper-item" v-for="(item, index) in spellGroup" :key="index"
					v-if="index%2 === 0">
					<view class="g-item left" @click="miniProgram(item,0)">
						<image :src="item.Img" mode="aspectFit"></image>
						<view class="t-box">
							<text class="title clamp">{{item.Title}}</text>
							<view class="price-box">
								<text class="price">￥{{(item.Price).toFixed(2)}}</text>
								<text class="m-price">￥{{(item.FPosPrice).toFixed(2)}}</text>
							</view>

							<view class="pro-box">
								<view class="progress-box">
									<progress percent="72" activeColor="#fa436a" active stroke-width="6" />
								</view>
								<text>{{item.GroupQty}}人成团</text>
							</view>
						</view>
					</view>
					<view class="g-item right" v-if="spellGroup[index+1]!==undefined" @click="miniProgram(index+1,2)">
						<image :src="spellGroup[index+1].Img" mode="aspectFit"></image>
						<view class="t-box">
							<text class="title clamp">{{spellGroup[index+1].Title}}</text>
							<view class="price-box">
								<text class="price">￥{{(spellGroup[index+1].Price).toFixed(2)}}</text>
								<text class="m-price">￥{{(spellGroup[index+1].FPosPrice).toFixed(2)}}</text>
							</view>
							<view class="pro-box">
								<view class="progress-box">
									<progress percent="72" activeColor="#fa436a" active stroke-width="6" />
								</view>
								<text>{{spellGroup[index+1].GroupQty}}人成团</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 分类推荐楼层 -->
		<classifs-list :choicenessList="choicenessList" :slist="slist"></classifs-list>
		<!-- 猜你喜欢 -->
		<view v-if="template==1">
			<view class="f-header m-t ">
				<image src="http://minipos.posyun3721.com/image/shopImg/h1.png"></image>
				<view class="tit-box">
					<!-- <text class="tit">{{title}}</text> -->
					<text class="tit">猜你喜欢</text>
					<text class="tit2">Guess You Like It</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<recomm-list :guess="guess"></recomm-list>
		</view>
		<view v-else>
			<view class="packModulesContainer">
				<view class="title">
					<text class="moduleType1">热销商品推荐</text>
					<text class="moduleType2">HOT PRODUCTS</text>
				</view>
			</view>
			<recomm-list2 :guess="guess"></recomm-list2>
		</view>
		<!-- <recomm-list2 :guess="guess"></recomm-list2> -->

		<!-- 积分兑换 （内容模板1不可用）0/2-->
		<!-- <integral-mall :Productid="integralId" :product="productList" :cartId="4" @eventClick='nvto'></integral-mall> -->

		<!-- 优惠劵模板 -->
		<!-- <choice-color @onChoice="Choice" :couponList="''"></choice-color> -->
		<!-- 区域模板 -->
		<!-- <product-list :title="'标题'" :Productid="2" :product="productList" :cartId="3"></product-list> -->
		<!-- <text @click="productAll">测试测试</text>ref="productAll" -->
	</view>
</template>

<script>
	import choiceColor from '@/components/choice-color.vue';
	import productList from '@/components/product/productAll.vue';
	import classifsList from '@/components/module-Goods/classify.vue';
	import recommList from '@/components/module-Goods/recommends.vue';
	import recommList2 from '@/components/module-Goods/recommends2.vue';
	import scrollNotice from "@/components/scroll-notice.vue";
	import Module from "@/components/module-Goods/module.vue";
	import IntegralMall from '@/components/integral-mall.vue';

	import {
		mapMutations
	} from 'vuex';
	let goodsList = [];
	export default {
		components: {
			choiceColor,
			productList,
			classifsList,
			recommList,
			recommList2,
			scrollNotice,
			Module,
			IntegralMall,
		},
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				val: '',
				/* 导航栏搜索框的值 */
				classname: [],
				bjColor: ["rgb(203, 87, 60)", "rgb(205, 215, 218)"],
				seckill: [], //秒杀活动
				spellGroup: [], //拼团活动
				advertis: [], //广告集合
				choicenessList: [], //分类精选
				//分类精选
				slist: [], //
				guess: [], //猜你喜欢
				imgUrl: 'http://39.108.106.221:6006',
				productList: [{ // 产品列表(传到组件中的)
					Img: '',
					name: 'sdfaf',
					price: '50.00'
				}],
				integralId: 3, //积分模板id /2/3
				template: 1
			};
		},

		onShareAppMessage() {
			// const promise = new Promise(resolve => {
			// 	setTimeout(() => {
			// 		resolve({
			// 			title: '商琦云商城'
			// 		})
			// 	}, 2000)
			// })
			// return {
			// 	title: '商琦云商城',
			// 	path: '/page/index/index?scene=3%3A821%3A1%3AMall',
			// 	promise
			// }
			let corpId = uni.getStorageSync('corpid');
			let stockId = uni.getStorageSync('stockId');
			let hostid = uni.getStorageSync('hostid');
			let param = encodeURIComponent(corpId + ":" + stockId + ":" + hostid + ":Mall");
			debugger
			return {
				title: '微商城',
				path: '/pages/index/index?scene=' + param
			}
		},
		onTabItemTap(item) {

		},

		onShareTimeline() {

		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.$corpid = uni.getStorageSync('corpid');
			this.$stockId = uni.getStorageSync('stockId');
			this.loadData();
		},
		onShow() {
			//通过vuex来控制按钮中的title值
			let title = this.integralId == 3 ? '立即兑' : '立即兑换';
			this.shoppCart(title);
		},
		onUnload() {
			//移除
			uni.$off('evenChange');
		},
		watch: {
			// Btntitle(){
			// 	//通过vuex来控制按钮中的title值
			// 	let title = this.integralId==3?'立即兑':'立即兑换';
			// 	this.shoppCart(title);
			// }
		},
		methods: {
			...mapMutations(['shoppCart']),
			method() {
				//调用挂载在vue下的全局方法，
				uni.$on('evenChange');
			},
			/**
			 * 
			 */
			async loadData() {
				//本地设置好的假数据
				// let carouselList = await this.$api.json('carouselList');
				// this.titleNViewBackground = carouselList[0].background;
				// let goodsList = await this.$api.json('goodsList');
				// goodsList = goodsList || [];
				//接口获取的数据
				this.$util.util('XcxShopHome/GetAdvList', {
					corpid: this.$corpid,
					stockid: this.$stockId,
				}, 'POST').then(res => {
					this.swiperLength = res.dtAdvCar.length;
					this.carouselList = res.dtAdvCar; //轮播图
					this.advertis = res.dtAdvPosit[0]; //广告
					this.choicenessList = res.dtClassTop; //分类精选
					//截取需要的分类id
					function path(list) {
						for (var i in list) { //给首页分类导航添加绑定的分类id
							let LinkUrl = list[i].FLinkUrl; //绑定的分类路径(在后台管理系统中设置)
							LinkUrl = LinkUrl.split('/');
							let arr = LinkUrl[LinkUrl.length - 1];
							arr = arr.split('.');
							list[i].itemId = arr[0];
						}
						return;
					}
					path(res.dtClassNav);
					path(this.choicenessList);
					this.classname = res.dtClassNav;
					// let classList1 = [],
					// 	classList2 = [];
					// res.dtClassNav.forEach((item, index) => {
					// 	if (index <= 3) {
					// 		classList1.push(item)
					// 	} else {
					// 		classList2.push(item)
					// 	}
					// })
					// this.classname.push(classList1, classList2); //首页分类导航
					this.choiceness();
					this.GetGoodsModules();
				}).catch(error => {
					console.log(error);
					uni.hideLoading()
				});
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;

				this.titleNViewBackground = this.bjColor[index];
			},
			//详情页
			navToDetailPage(item, typeID) {
				let id = '0',
					acytpe = '',
					goodsid = item.FGoodsID,
					goodsClassId = item.FGoodsClsID
					
				if (goodsClassId > 0) {
					uni.navigateTo({
						url: `/pages/product/list?tid=${18778}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/product/product?id=${id}&goodsid=${goodsid}`
					})
				}
			},
			miniProgram(item, id) {
				let oid = '',
					activity = {};
				if (id === 2) {
					oid = 1;
					activity = {
						groupId: this.spellGroup[item].AcId,
						id: 0,
					};
				} else {
					activity = {
						groupId: item.AcId,
						id: id,
					};
					if (id == 1) {
						activity.goodsId = item.GoodsId;
					}
					oid = id == 1 ? 2 : 1;
				}
				let stockId = uni.getStorageSync('stockId');
				let hostid = uni.getStorageSync('hostid')
				let token = uni.getStorageSync('Token');
				let scan = {
					FItemID: stockId,
					parentID: '',
					hostid: hostid,
					PagePath: 'Marketing',
				};
				let data = {
					scan: scan,
					activity: activity,
				};
				let url = 'pages/Marketing/index/select/select' + oid;
				this.$util.miniProgram(url, data);
			},
			//分类导航
			navToClass(id) {
				uni.navigateTo({
					url: `/pages/product/list?id=${id}`
				})
			},

			//获取门店id
			getStockById() {
				this.$util.util('WeChatShop/GetStockById', {
					StockId: this.$stockId,
				}, 'GET').then(res => {
					// //获取秒杀活动
					// this.$util.util('Sale/GetSeckillGoodsList', {
					// 	corpid: this.$corpid
					// }, 'POST').then(res => {
					// 	let seckill = this.aprom(res);
					// 	if (seckill != '' || seckill.length != 0) {
					// 		let arr = this.onCountdown(seckill);
					// 		this.seckill = arr;
					// 	} else {
					// 		this.seckill = '';
					// 	}
					// }).catch(error => console.log(error));

					// this.$util.util('Sale/GetGroupSale', {
					// 	corpid: this.$corpid
					// }, 'POST').then(res => {
					// 	let spellgroup = this.aprom(res);
					// 	if (spellgroup != '' || spellgroup.length != 0) {
					// 		let arr = this.onCountdown(spellgroup);
					// 		this.spellGroup = arr;
					// 	} else {
					// 		this.spellGroup = '';
					// 	}
					// 	uni.hideLoading();
					// }).catch(error => console.log(error));
					uni.hideLoading();
					this.$util.util('WeChatShop/MiniProgramName', {}, 'POST').then(res => {
						let title = res;
						uni.setNavigationBarTitle({
							title
						})
					}).catch(error => console.log(error));
				}).catch(error => {
					console.log(error);
					uni.showModal({
						title: '提示',
						content: '登录失败，是否重新登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
								uni.setStorageSync('Oldhostid', this.$hostid)
							}
						}
					})
					uni.hideLoading();
				});
			},
			//时间的判断，判断当前活动是否可用
			onCountdown(list) {
				let arr = [];
				for (var i in list) {
					let time = this.$util.onCountdown(list[i].EndTime);
					if (time.type != 1) {
						arr.push(list[i]);
					}
				}
				return arr;
			},
			//
			aprom(list) {
				let end = '',
					e = '',
					arr = [];
				if (list == '') {
					return arr;
				}
				if (list != []) {
					for (var i in list) {
						if (list[i].IvQty != 0 && list[i].Status != 0) {
							end = list[i].EndTime;
							let acid = list[i].AcId;
							if (e.type != 1) {
								arr.push(list[i]);
							}
						}
					}
				}
				return arr;
			},
			//分类精选	
			async choiceness() {
				let list = this.choicenessList;
				let data = {
					corpid: this.$corpid,
					stockid: this.$stockId,
					pageindex: 0,
				}
				let lists = '';
				let arr = [];
				if (list != '' || list.length != 0) {
					for (var i in list) {
						data.classid = list[i].itemId;
						lists = await this.$util.util('Product/GetGoodClass', data, 'POST');
						if (lists.length != 0) {
							arr[i] = lists;
						}
					}
				}
				this.slist = arr;
				this.onGuess();
			},
			//推荐商品列表
			onGuess() {
				let data = {
					corpid: this.$corpid,
					count: 10
				}
				this.$util.util('Product/GoodsRandom', data, 'POST').then(res => {
					res.forEach(item => {
						if (item != null)
							item.FMallPrice = item.FMallPrice.toFixed(2);
					})
					this.guess = res;
					this.getStockById();
				})
			},
			Choice(data) {},
			nvto() {
				uni.navigateTo({
					url: '/pages/Integral-mall/Integral-mall'
				})
			},
			// productAll(){
			// 	this.$refs.productAll.onClick();
			// },
			GetGoodsModules() {
				let hostid = uni.getStorageSync('hostid')
				let param = {
					corpId: this.$corpid,
					hostId: hostid
				}
				this.$util.util('XcxShopHome/GetGoodsModules', param, 'POST').then(res => {
					if (res.length > 0)
						this.template = res[0].FTemplate
				})
			},
			getFocusSearch() {
				uni.navigateTo({
					url: '../search/search'
				});
			}
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			this.$api.msg('点击了搜索框');
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg('点击了扫描');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box {
		position: relative;
		padding: 10upx 60upx;
		background-color: #f9f9d5;

		.ser-input {
			padding: 0 10px;
			height: 56upx;
			line-height: 56upx;
			font-size: 28upx;
			border-radius: 20px;
			background: rgba(255, 255, 255, .6);
		}

		.mp-search-button {
			position: absolute;
			top: 8px;
			right: 20px;
		}
	}

	page {
		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}

		.carousel-section {
			padding: 0;

			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}

			.carousel {
				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 45upx;
				bottom: 40upx;
			}
		}
	}

	/* #endif */


	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 16upx;
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	.ad-1 {
		width: 100%;
		height: 210rpx;
		padding: 10upx 0;
		background: #fff;

		.ad-swiper {
			width: auto;
			height: 100%;

			// image {
			// width: auto;
			// height: 100%;
			margin: 10rpx 30rpx;
			display: block;
			border-radius: 150rpx;
			// }
		}

	}

	/* 秒杀专区 */
	.seckill-section {
		padding: 4upx 30upx 24upx;
		background: #fff;

		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.s-img {
				width: 140upx;
				height: 30upx;
			}

			.tip {
				font-size: $font-base;
				color: $font-color-light;
				margin: 0 20upx 0 40upx;
			}

			.timer {
				display: inline-block;
				width: 40upx;
				height: 36upx;
				text-align: center;
				line-height: 36upx;
				margin-right: 14upx;
				font-size: $font-sm+2upx;
				color: #fff;
				border-radius: 2px;
				background: rgba(0, 0, 0, .8);
			}

			.icon-you {
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 150upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 6upx;
			}

			.price {
				color: $uni-color-primary;
			}
		}
	}

	.f-header {
		display: flex;
		align-items: center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;
		width: 100%;

		image {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}

		.tit-box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.tit {
			font-size: $font-lg +2upx;
			color: #font-color-dark;
			line-height: 1.3;
		}

		.tit2 {
			font-size: $font-sm;
			color: $font-color-light;
		}

		.icon-you {
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}

	/* 团购楼层 */
	.group-section {
		background: #fff;

		.g-swiper {
			height: 650upx;
			padding-bottom: 30upx;
		}

		.g-swiper-item {
			width: 100%;
			padding: 0 30upx;
			display: flex;
		}

		image {
			width: 100%;
			height: 460upx;
			border-radius: 4px;
		}

		.g-item {
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.left {
			flex: 1.2;
			margin-right: 24upx;

			.t-box {
				padding-top: 20upx;
			}
		}

		.right {
			flex: 0.8;
			flex-direction: column-reverse;

			.t-box {
				padding-bottom: 20upx;
			}
		}

		.t-box {
			height: 160upx;
			font-size: $font-base+2upx;
			color: $font-color-dark;
			line-height: 1.6;
		}

		.price {
			color: $uni-color-primary;
		}

		.m-price {
			font-size: $font-sm+2upx;
			text-decoration: line-through;
			color: $font-color-light;
			margin-left: 8upx;
		}

		.pro-box {
			display: flex;
			align-items: center;
			margin-top: 10upx;
			font-size: $font-sm;
			color: $font-base;
			padding-right: 10upx;
		}

		.progress-box {
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			margin-right: 8upx;
		}
	}

	.none {
		display: none !important;
	}

	.packModulesContainer {
		width: 100%;
		height: auto;
		position: relative;
		overflow: hidden;
		background: #fff;

		.title {
			width: 100%;
			height: auto;
			margin-bottom: 20upx;

			.moduleType1 {
				font-size: 18px;
				color: rgb(51, 51, 51);
				font-weight: bold;
				text-decoration: none;
				text-align: center;
				line-height: 46upx;
				display: block;
				margin-top: 28upx;
			}

			.moduleType2 {
				display: block;
				font-size: 12px;
				color: rgb(153, 153, 153);
				text-decoration: none;
				text-align: center;
				line-height: 34upx;
			}
		}
	}
</style>
